<script setup lang="ts">
import type { FormDesignerComponents } from "../FormComponentMixin";
import { onMounted } from "vue";
import CommonConfig from "./CommonConfig.vue";
import { queryDictList, queryEntryList } from "@/api/admin/system/dict";
const config = defineModel<FormDesignerComponents>("config");
const propsCollapse = ref("0");

const state = reactive({
  dictOptions: [],
  dictValueOptions: []
});

onMounted(() => {
  initDictList();
});

function initDictList() {
  queryDictList({ ascs: "order_id" }).then(res => {
    if (res.code === 200) {
      state.dictOptions = res.data;
    } else {
      state.dictOptions = [];
    }
  });
}

function initDictItemList() {
  const params = {
    dictCode: config.value.props.dictCode,
    ascs: "order_id"
  };
  queryEntryList(params).then(res => {
    if (res.code === 200) {
      state.dictValueOptions = res.data;
    } else {
      state.dictValueOptions = [];
    }
  });
}

watchEffect(() => {
  initDictItemList();
});
</script>

<template>
  <el-collapse v-model="propsCollapse" accordion>
    <el-collapse-item name="0">
      <template #title>
        <div class="collapse-title">
          <el-icon color="#1890ff"><List /></el-icon>
          <div>基本属性</div>
        </div>
      </template>
      <CommonConfig v-model:config="config" />
      <el-form-item label="提示文字">
        <el-input v-model="config.props.placeholder" placeholder="输入提示" />
      </el-form-item>
      <el-form-item label="选项展开">
        <el-switch v-model="config.props.expanding" />
      </el-form-item>
      <el-form-item label="隐藏名称">
        <el-switch v-model="config.props.hideLabel" />
      </el-form-item>
      <el-form-item label="是否必填">
        <el-switch v-model="config.props.required" />
      </el-form-item>
      <el-form-item label="字典" required>
        <el-select v-model="config.props.dictCode" @change="initDictItemList">
          <el-option
            v-for="(item, index) in state.dictOptions"
            :key="index"
            :label="item.dictName"
            :value="item.dictCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="显示全部">
        <el-switch v-model="config.props.showAll" />
      </el-form-item>
      <el-form-item label="排除选项">
        <el-checkbox-group v-model="config.props.exclude">
          <el-checkbox
            v-for="(item, index) in state.dictValueOptions"
            :key="index"
            :label="item.dictText"
            :value="item.dictValue"
          />
        </el-checkbox-group>
      </el-form-item>
    </el-collapse-item>
  </el-collapse>
</template>

<style lang="scss" scoped>
:deep(.w-fd-options) {
  .el-input-group__append,
  .el-input-group__prepend {
    padding: 0 10px;
  }
}
.collapse-title {
  padding: 0px 5px;
  display: flex;
  align-items: center;

  & > div {
    margin-left: 10px;
  }
}
.w-move {
  cursor: move;
}
</style>
